<template>
   <div class="update_name">
      <!-- 导航栏 -->
      <van-nav-bar
         title="设置昵称"
         left-text="取消"
         right-text="完成"
         @click-left="$emit('close')"
         @click-right="onConfirm"
      ></van-nav-bar>
      <!-- 输入框 -->
      <div class="filed_wrap">
         <van-field
            v-model.trim="localName"
            rows="2"
            autosize
            type="textarea"
            maxlength="7"
            placeholder="请输入昵称"
            show-word-limit
         />
      </div>
   </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'
export default {
   name: 'Update_name',
   data() {
      return {
         localName: this.value
      }
   },
   props: {
      value: {
         type: String,
         required: true
      }
   },
   methods: {
      async onConfirm() {
         this.$toast.loading({
            message: '保存中...',
            forbidClick: true,
            // 持续展示
            duration: 0
         })
         try {
            // const localName = this.localName
            if (!this.localName.length) {
               this.$toast('昵称不能为空')
               return
            }
            await updateUserProfile({
               name: this.localName
            })
            // console.log(data)
            // 更新视图
            this.$emit('input', this.localName)
            // 关闭弹层
            this.$emit('close')
            this.$toast.success('更新成功')
         } catch (err) {
            this.$toast.fail('修改失败')
         }
      }
   }
}
</script>

<style lang="less" scoped>
.filed_wrap {
   padding: 10px;
}
</style>
